<template>
  <div class="containerDiv">
    <Layout class="layout">
      <Sider class="typeSlider" :width="340">
        <Card
          title="服务类型"
          class="typeCard"
          :style="typeCardStyleObj"
          style="margin-bottom: 15px"
        >
          <CellGroup @on-click="typeParams">
            <Cell
              v-for="(item, index) in typeList"
              :key="index"
              :title="item.type + '(' + item.members + ')'"
              :name="item.id"
              :selected="item.isSelect ? true : false"
            />
          </CellGroup>
        </Card>
        <Card title="主题分类" class="typeCard" :style="typeCardStyleObj">
          <CellGroup @on-click="themeClassParams">
            <Cell
              v-for="(item, index) in themeClassList"
              :key="index"
              :title="item.themeClass + '(' + item.members + ')'"
              :name="item.id"
              :selected="item.isSelect ? true : false"
            />
          </CellGroup>
        </Card>
      </Sider>
      <Content class="content">
        <div class="contentContainer">
          <Row>
            <Col span="18" />
            <Col span="6">
              <Input
                search
                size="large"
                enter-button
                placeholder="键入关键词搜索"
                v-model="name"
                @on-search="queryService"
                @on-clear="clearSearch"
                clearable
              />
            </Col>

            <Col span="24">
              <Loading v-if="isLoading"></Loading>
            </Col>
            <Row class="serviceListContainer" v-show="!isLoading">
              <Col v-for="(item, index) in serviceList" :key="index" span="12">
                <ServiceItem
                  :imgUrl="item.thumb"
                  :title="item.title"
                  :publishDate="item.publishDate"
                  :publishOrganization="item.publishOrganization"
                  :desc="item.desc"
                  :id="item.id"
                  class="serviceItem"
                ></ServiceItem
              ></Col>

              <Col span="24">
                <div class="pageContainer">
                  <Page
                    :total="serviceTotalNum"
                    show-elevator
                    show-total
                    @on-change="pageParams"
                  ></Page>
                </div>
              </Col>
            </Row>
          </Row>
        </div>
      </Content>
    </Layout>
  </div>
</template>

<style>
.ivu-card-head {
  background: rgb(0, 63, 84);
}
.ivu-card-head span {
  color: rgba(255, 255, 255, 1);
}
</style>
<style scoped>
.layout {
  height: 100%;
  padding: 25px;
}
.typeSlider {
  background-color: #f8f8f9;
  text-align: center;
}
.content {
  width: 100%;
  background: white;
  margin-left: 25px;
  padding: 19px 25px 0 25px;
}
.hrContainer {
  padding: 15px 0;
}
hr {
  color: #e5e5e5;
  border-width: 1px;
}
.serviceItem {
  margin-bottom: 10px;
}
.serviceListContainer {
  margin-top: 15px;
}
.pageContainer {
  text-align: center;
}
</style>

<script>
import $ from "jquery";
import ServiceItem from "../components/ResourceDirectory/ServiceItem";
import Loading from "../components/Other/Loading";

export default {
  name: "ResourceDirectory",
  data() {
    return {
      typeCardStyleObj: {
        height: "",
      },
      typeList: [],
      themeClassList: [],
      type: "",
      themeClass: "",
      name: "",
      page: 1,
      size: 10,
      serviceList: [],
      serviceTotalNum: 0,
      isLoading: true,
    };
  },
  components: { ServiceItem, Loading },
  methods: {
    getHeight() {
      this.typeCardStyleObj.height = (window.innerHeight - 146) / 2 + "px";
      $(".ivu-card-body")
        .height((window.innerHeight - 141) / 2 - 85)
        .css("overflow-y", "auto");
      console.log($(".serviceListContainer").height());
      $(".serviceListContainer")
        .height(window.innerHeight - 80 - 135)
        .css("overflow-y", "auto");
      console.log($(".serviceListContainer").height());
    },
    queryType() {
      this.axios
        .get("/type")
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            return res.data.data;
          } else {
            this.$Message.info("当前查询不到服务类型");
            return [];
          }
        })
        .then((res) => {
          this.typeList = res;
          for (const element of this.typeList) {
            element.isSelect = false;
          }
        });
      this.axios
        .get("/class")
        .then((res) => {
          if (res.data.code == 200) {
            return res.data.data;
          } else {
            this.$Message.info("当前查询不到主题分类");
            return [];
          }
        })
        .then((res) => {
          this.themeClassList = res;
          for (const element of this.themeClassList) {
            element.isSelect = false;
          }
        });
    },
    queryService() {
      this.isLoading = true;
      this.axios
        .get("/service", {
          params: {
            type: this.type,
            themeClass: this.themeClass,
            name: this.name,
            page: this.page,
            size: this.size,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res.data);
            this.serviceList = res.data.data;
            this.serviceTotalNum = res.data.total;
            this.isLoading = false;
          } else {
            this.$Message.info("无法查询到服务！");
            this.serviceList = [];
            this.isLoading = false;
          }
        });
    },
    clearSearch() {
      this.queryService();
    },
    typeParams(name) {
      this.type = this.switchSelect(this.typeList, name);
      this.queryService();
    },
    themeClassParams(name) {
      this.themeClass = this.switchSelect(this.themeClassList, name);
      this.queryService();
    },
    switchSelect(objArr, name) {
      for (const key in objArr) {
        const element = objArr[key];
        if (element.id == name) {
          element.isSelect = !element.isSelect;
          if (element.isSelect) {
            return name;
          } else {
            return "";
          }
        } else {
          element.isSelect = false;
        }
      }
    },
    pageParams(page) {
      this.page = page;
      this.queryService();
    },
  },
  mounted() {
    this.$nextTick(this.getHeight());
    this.queryType();
    this.queryService();
    this.$(window).resize(() => {
      this.getHeight();
    });
  },
};
</script>
